<!DOCTYPE html>
<%    
	String path = request.getContextPath();    
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";    
	pageContext.setAttribute("basePath",basePath);    
%>    
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="${basePath}/resources/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			$(function() {
				setInterval(drawClock, 1000);
			})
			//ç»çº¿
			function draw_line() {
				var c = document.getElementById("mycanvas");
				var cxt = c.getContext("2d");
				cxt.moveTo(10, 10);
				cxt.lineTo(150, 50);
				cxt.lineTo(10, 50);
				cxt.stroke();
			}

			//ç»å­æ¯
			function draw_word() {
				var c = $("#mycanvas")[0];
				var cxt = c.getContext("2d");
				cxt.font = "38pt Arial";
				cxt.fillText("hello Canvas", c.width / 2 - 150, c.height / 2 + 15);
				cxt.strokeText("hello Canvas", c.width / 2 - 150, c.height / 2 + 15);
			}

			var centerX = 200, centerY = 185;

			//ç»å¶æ¶éï¼åç å©ç¨å¨ç» æ¯ç§æ¦é¤éæ°ç»å¶
			function drawClock() {
				var cvs = $("#mycanvas")[0];
				var ctx = cvs.getContext("2d");
				ctx.clearRect(0,0,400,400);
				drawDial(ctx);
				drawNumber(ctx);
				drawHands(ctx);
			}

			//ç»å¶è¡¨ç
			function drawDial(ctx) {
				ctx.beginPath();
				ctx.arc(centerX, centerY, 150, 0, 2 * Math.PI);
				ctx.stroke();
				ctx.beginPath();
				ctx.arc(centerX, centerY, 1, 0, 2 * Math.PI);
				ctx.fill();
			}

			//ç»å¶è¡¨é

			function drawHand(loc, isHour, ctx) {
				var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2, handRadius = isHour ? centerX - 80 : centerX - 60;
				ctx.moveTo(centerX, centerY);
				ctx.lineTo(centerX + Math.cos(angle) * handRadius, centerY + Math.sin(angle) * handRadius);
				ctx.stroke();
			}

			//ç»å¶è¡¨é
			function drawHands(ctx) {
				var date = new Date(), hour = date.getHours(), minute = date.getMinutes();
				hour = hour > 12 ? hour - 12 : hour;
				drawHand(hour * 5 + (date.getMinutes() / 60) * 5, true,ctx);
				drawHand(date.getMinutes(), false,ctx);
				drawHand(date.getSeconds(), false, ctx);

			}

			//ç»å¶æ¶é´å¼
			function drawNumber(ctx) {
				var angle;
				for (var i = 1; i < 13; i++) {
					angle = Math.PI / 6 * (i - 3);
					var x = centerX + Math.cos(angle) * 170;
					var y = centerY + Math.sin(angle) * 170;
					ctx.beginPath();
					ctx.fillText(i, x, y)
					ctx.fill();
				}
			}
		</script>
	</head>
	<body>
		<canvas id="mycanvas" width="400" height="400" style="border:1px solid #c3c3c3;" >
			è¿å¨ç¨åé³ie?èµ¶ç´§æ¢å§ï¼ååéç«èµ·æ¥ï¼
		</canvas>

	</body>
</html>
